<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #left,#right{
            width: 150px;
            height:200px;
        }
        .ss{
            display: flex;
        }
        .btns{
            display: flex;
            flex-direction: column;
            width: 90px;
            height: 200px;
            justify-content: space-evenly;
            align-items: center;
        }
    </style>
</head>
<body>
    <div id="tb"></div>
    <div class="ss">
        <select name="" id="left" multiple>
            <option value="">张飞</option>
            <option value="">关羽</option>
            <option value="">刘备</option>
            <option value="">曹操</option>
            <option value="">诸葛亮</option>
        </select>
        <div class="btns">
            <input type="button" value=">" onclick="leftToRight()">
            <input type="button" value=">>" onclick="AllLeftToRight()">
            <input type="button" value="<">
            <input type="button" value="<<">
        </div>
        <select name="" id="right" multiple></select>
        <div id="divs">
            <p>段落1</p>
            <p>段落2</p>
            <p>段落3</p>
            <p>段落4</p>
            <p>段落5</p>
        </div>
    </div>
    <script>
        let tb = document.createElement("table");
        let tbody = document.createElement("tbody");
        for(let i = 1;i <= 9;i++){
            let tr = document.createElement("tr");
            for(let j = 1;j <= i;j++){
                let td = document.createElement("td");
                let txt = document.createTextNode(`${i} * ${j} = ${i*j}`);
                td.appendChild(txt);
                tr.appendChild(td);
            }
            tbody.appendChild(tr);
        }
        tb.appendChild(tbody);
        tb.setAttribute("border","1");
        document.getElementById("tb").appendChild(tb);

        let left = document.getElementById("left");
        let right = document.getElementById("right");
        
        let leftToRight = function(){
            let opt = left.options[left.selectedIndex];
            
            right.appendChild(opt);
            opt.selected = false;
        }
        let AllLeftToRight = function(){
            // let opts = left.options;
            let opts = left.querySelectorAll("option");
            for(let opt of opts){
                right.appendChild(opt);
            }
            // for(let i = opts.length - 1;i >= 0;i--){
            //     right.appendChild(opts[i]);
            // }
        }

        let ps = document.getElementsByTagName("p");
        let ps1 = document.querySelectorAll("p");
        console.log(ps)
        console.log(ps1)
        let newP = document.createElement("p")
        newP.appendChild(document.createTextNode("new"))
        document.getElementById("divs").appendChild(newP)
        console.log(ps)
        console.log(ps1)
    </script>
</body>
</html>